<template>
    <div class="inform">
        <div class="inform_msg">
            <div class="cleas">
                <strong @click='a'>
                    <input type="checkbox" class="checkbox" :checked="tishi">
                    <!-- <check-icon :value='tishi' type="plain" class="f20"/> -->
                    <span>不再提示</span>
                </strong>
                <i class="icon iconfont icon-xiaoguanbi1" @click="guanbi()"></i>
                <b>({{$store.state.remindTime}})</b>
            </div>
            <div class="inform_cont">
                <div class="info">
                    <div v-if="isLing">
                        <img src="@/assets/my/ling-quan.png" alt="">
                    </div>
                    <div v-if="!isLing">
                        <img src="@/assets/my/cheng-quan.png" alt="">
                    </div>
                </div>
                <div class="inform_btn">
                    <button v-if="isLing" class="f30" @click="sendCouponToUser">立即领取</button>
                    <button v-if="!isLing" class="yiling f30" @click="cesuan()">立即测算</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'inform',
        data() {
            return {
                isLing: true,
                tishi: false,
            }   
        },
        methods: {
            countUserCoupon() {
                let params = {
                    couponId: 3,
                    userId: this.$store.state.userId
                }
                this.$http.fetchGet('countUserCoupon', params).then(res => {
                    if(res.data == 0) this.isLing = true;
                    else this.isLing = false
                })
            },
            sendCouponToUser() {
                let params = {
                    userId: this.$store.state.userId,
                    couponId: '3'
                }
                this.$http.fetchGet('sendCouponToUser', params).then(res => {
                    if(res.code == 200) {
                        this.isLing = false;
                    } else {
                        this.isLing = true;
                    }
                })
            },
            a(v){
                this.tishi = !this.tishi
            },
            guanbi() {
                if(this.tishi){
                    window.localStorage.setItem('show', false)
                    this.$store.commit('remindchu', false);
                } else {
                    this.$store.commit('remindchu', false);
                }
            },
            cesuan() {
                this.$router.push({
                    path: '/interact'
                })
                this.$store.commit('remindchu', false);
            }
        },
        mounted() {
            this.countUserCoupon()
        }
    }
</script>

<style lang="less" scoped>
    .inform{
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,.6);
        z-index: 99;
        .inform_msg{
            .w(600);
            position: absolute;
            top: 50%;
            left:50%;
            transform: translate(-50%, -50%);
            .cleas{
                color: #ccc;
                text-align: right;
                .lh(40);
                .checkbox{
                    border: none;
                    .w(30);
                    .h(30);
                    position: relative;
                    top: 3px;
                }
                .weui-icon-success-circle{
                    .f20;
                }
                .weui-icon-success{
                    .f20;
                }
                i.icon{
                    position: relative;
                    top: 3px;
                    right: 2px;
                    .ml(15);
                    cursor: pointer;
                }
            }
            .inform_cont{
                .perfect_card_ticket{
                    .w(600);
                    position: relative;
                    img{
                        .w(500);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
                .info{
                    div{
                        text-align: center;
                        img{
                            width: 100%;
                            height: auto;
                        }
                    }
                }
                .inform_btn{
                    text-align: center;
                    button{
                        .w(500);
                        .h(88);  
                        border: none;
                        background: #FF0000;
                        color: #fff;
                        margin: 10px auto;
                        border-radius: 300px;
                        &.yiling{
                            background: #FF0000;
                        }
                    }
                }
            }
        }
    }
</style>
